<template>
    <div class="bigbox">
        <ETable :delelteAll="delemployeeAll" :delelte="delemployee" :columns="columns"  :loadData="getemployee"  :isPage="true" :pageSize="[10,20,30]" ref="table" >
  
          <template #search="{params , search , reset}">
            <el-form :inline="true" class="demo-form-inline"> 
              <el-form-item label="员工姓名:">
                <el-input v-model="params.name" placeholder="请输入员工姓名" clearable />
              </el-form-item>
              <el-form-item label="联系方式:">
                <el-input v-model="params.mobile" placeholder="请输入联系方式" clearable />
              </el-form-item>
              <el-form-item label="所属岗位:">
                <el-input v-model="params.roles" placeholder="请选择岗位" clearable />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="search">查询</el-button>
              </el-form-item>
              <el-form-item>
                <el-button type="" @click="reset">重置</el-button>
              </el-form-item>
            </el-form>
          </template>

          <template #buttons="{delAll}">
            <el-button type="success" @click="add">添加护工</el-button>
            <el-button type="danger" @click="delAll">批量删除 </el-button>
          </template>

          <template #operation="{row,del}">
            <el-button type="danger" @click="del(row.id)">删除 </el-button>
            <!-- <el-button type="danger" @click="del(row.id)">删除</el-button> -->
          </template>
          
          <template #photo="{row}">

        <el-image
          style="width: 50px; height: 50px"
          :src="imgUrl+row.photo"
          :zoom-rate="1.2"
          :max-scale="7"
          :min-scale="0.2"
          :preview-src-list="[imgUrl+row.photo]"
          :initial-index="4"
          fit="cover"
          preview-teleported
        />
      </template>
     
        </ETable>

        <el-dialog v-model="open" title="新增护工">
          <el-form>
            <ETable  :delelte="delemployee" :columns="columns"  :loadData="getemployee"  :isPage="false" :pageSize="[10,20,30]" ref="table" >
              <template #search="{params , search , reset}">
                <el-form :inline="true" class="demo-form-inline"> 
                  <el-form-item  label="员工姓名:">
                    <el-input style="width: 120px;"  v-model="params.name" placeholder="请输入" clearable  />
                  </el-form-item>
                  <el-form-item label="所属岗位:">
                    <el-input style="width: 120px;" v-model="params.roles" placeholder="请选择岗位" clearable />
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary" @click="search">查询</el-button>
                  </el-form-item>
                  <el-form-item>
                    <el-button type="" @click="reset">重置</el-button>
                  </el-form-item>
                </el-form>
              </template>
            </ETable>
          </el-form>
      </el-dialog>
    </div>
  </template>
  
  <script setup lang="ts">

  import  { delemployee, getemployee,delemployeeAll } from '../../apis/employee/employee';
  import ETable, { type ColumnType } from '../../components/ETable.vue';
  import { reactive, ref} from 'vue';


const imgUrl =import.meta.env.VITE_IMG_URL;

const open=ref(false)
const add=()=>{
  open.value=true
}


  const columns= reactive<ColumnType[]>([
  {
    prop: 'id',
    label: '序号',
    width: '',
  },
  {
    prop: 'photo',
    label: '头像',
    width: '',
    slot: true,
  },
  {
    prop: 'name',
    label: '姓名',
    width: '',
  },
  {
    prop: 'mobile',
    label: '联系方式',
    width: '',
  },
  {
    prop: 'roles[0].name',
    label: '所属岗位',
    width: '',
  },
  {
    prop: 'operation',
    label: '操作',
    slot: true,
    width: '',
  },
  ])
  
  </script>
  
  <style scoped>
  .search_top2{
    margin-left: 10px;
    margin-top: 10px;
  }
  .search_top{
    width: 200px;
    display: inline-block;
  }
  .search{
    width: 100%;
    height: 100px;
    background-color: #fff;
    overflow: hidden;
  }
  </style>